<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">路由名称</span>
        <el-input v-model="apiSearchData.name" placeholder="路由名称" class="searchInfoInput"></el-input>

        <span class="inputLabel">路由编码</span>
        <el-input v-model="apiSearchData.code" placeholder="路由编码" class="searchInfoInput"></el-input>

        <span class="inputLabel">断言</span>
        <el-input v-model="apiSearchData.predicates" placeholder="断言" class="searchInfoInput"></el-input>

        <span class="inputLabel">微服务</span>
        <el-select v-model="apiSearchData.applicationName" placeholder="微服务" class="searchInfoInput" clearable>
            <el-option :label="item.applicationName" :value="item.applicationName" v-for="item in applicationList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryApiInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script>
import {apiRouteInfoQuery} from "@/request/api";
import {applicationInfoQuery} from "@/request/service";

export default {
    name: "ApiSearch",
    data() {
        return {
            applicationList: [],
            searchLoading: false
        }
    },
    computed: {
        apiSearchData() {
            return this.$store.state.apiSearchData;
        }
    },
    methods: {
        resetInput() {
            this.apiSearchData.name = '';
            this.apiSearchData.code = '';
            this.apiSearchData.predicates = '';
            this.apiSearchData.applicationName = '';
        },
        queryApiInfo() {
            this.searchLoading = true
            apiRouteInfoQuery(this.apiSearchData).then(res => {
                if (res.code === '200') {
                    this.$store.commit('changeRouterDataList', res.data);
                }
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        }
    },
    created() {
        applicationInfoQuery(this.apiSearchData).then(res => {
            if (res.code === '200') {
                this.applicationList = res.data;
            }
        })
    }
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}

</style>